<template>
  <div class="userinfo">
    <div class="top">
      <div class="top_main">
        <div class="top_left">
          <div class="goindex" @click="goindex"><logo></logo></div>
          <div style="font-size:30px;font-weight:400;padding:0 8px;">/</div>
          <div style="font-size:18px;font-weight:400">放单中心</div>
        </div>
        <div>
          <el-dropdown style="cursor: pointer;" trigger="click">
            <span class="el-dropdown-link">
              <span style="color: black;">欢迎您: {{ name }}</span>
              <i
                style="color: black;"
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div
                  @click="dologout()"
                  style="display:inline-block;width:100px;height:36px"
                >
                  <i class="el-icon-close"></i>
                  <span>退出</span>
                </div>
              </el-dropdown-item>
              <!-- <el-dropdown-item icon="el-icon-circle-plus"
                >狮子头</el-dropdown-item
              > -->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="userinfo_main">
      <div class="user_content">
        <div class="navber">
          <el-menu
            class="el-menu-vertical-demo"
            text-color="gray"
            active-text-color="#2F87FF"
            :router="true"
            :default-active="$route.path"
            style="text-align:left"
          >
            <!-- @select="handleSelect" -->
            <!-- 2=推广用户 -->
            <!-- 前台注册用户 1 -->
            <el-menu-item
              v-if="user_type === 1 || user_type === 2"
              index="/userinfo/homepage"
            >
              <div class="router_box">
                <i class="el-icon-s-home"></i>
                <span slot="title">
                  首页
                </span>
              </div>
            </el-menu-item>
            <!-- 商品管理 -->
            <el-menu-item
              v-if="user_type === 1 || user_type === 2"
              index="/userinfo/goodsmanage"
            >
              <div class="router_box">
                <i class="el-icon-s-goods"></i>
                <span slot="title">
                  商品管理
                </span>
              </div>
            </el-menu-item>
            <!-- 黑名单 -->
            <el-submenu
              v-if="user_type === 1 || user_type === 2"
              index="/userinfo/blacklist"
            >
              <template slot="title">
                <div class="router_box">
                  <i class="el-icon-circle-close"></i>
                  <span>
                    黑名单
                  </span>
                </div>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/userinfo/blacklist">
                  <div class="router_box2">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">
                      黑名单
                    </span>
                  </div>
                </el-menu-item>
                <el-menu-item index="/userinfo/report">
                  <div class="router_box2">
                    <i class="el-icon-edit"></i>
                    <span slot="title">
                      我要举报
                    </span>
                  </div>
                </el-menu-item>
                <el-menu-item index="/userinfo/myreport">
                  <div class="router_box2">
                    <i class="el-icon-tickets"></i>
                    <span slot="title">
                      我的举报
                    </span>
                  </div>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 团队设置 -->
            <el-menu-item
              v-if="user_type === 1 || user_type === 2"
              index="/userinfo/teamset"
            >
              <div class="router_box">
                <i class="el-icon-s-custom"></i>
                <span slot="title">
                  团队设置
                </span>
              </div>
            </el-menu-item>
            <!-- 消息通知 -->
            <el-menu-item
              v-if="user_type === 1 || user_type === 2"
              index="/userinfo/newsNotice"
            >
              <div class="router_box">
                <i class="el-icon-s-comment"></i>
                <span slot="title">
                  消息通知
                </span>
              </div>
            </el-menu-item>
            <!-- 淘宝授权 -->
            <el-menu-item
              v-if="user_type === 1 || user_type === 2"
              index="/userinfo/pid"
            >
              <div class="router_box">
                <i class="iconfont icon-tb_icon" style="margin-right: 5px;"></i>
                <span slot="title">
                  淘宝授权
                </span>
              </div>
            </el-menu-item>

            <!-- 上单 3 -->
            <el-menu-item v-if="user_type === 3" index="/userinfo/upgoodshome">
              <div class="router_box">
                <i class="el-icon-s-home"></i>
                <span slot="title">
                  上单首页
                </span>
              </div>
            </el-menu-item>
            <!-- 发布新单 -->
            <el-menu-item v-if="user_type === 3" index="/userinfo/uporder">
              <div class="router_box">
                <i class="el-icon-document"></i>
                <span slot="title">
                  发布新单
                </span>
              </div>
            </el-menu-item>
            <!-- 上单商品管理 -->
            <el-menu-item v-if="user_type === 3" index="/userinfo/upgoods">
              <div class="router_box">
                <i class="el-icon-shopping-bag-2"></i>
                <span slot="title">
                  上单商品管理
                </span>
              </div>
            </el-menu-item>
            <!-- 商品反馈 -->
            <el-menu-item v-if="user_type === 3" index="/userinfo/tickling">
              <div class="router_box">
                <i class="el-icon-star-off"></i>
                <span slot="title">
                  商品反馈
                </span>
              </div>
            </el-menu-item>
            <!-- 淘礼金 -->
            <el-menu-item v-if="user_type === 3" index="/userinfo/taogifts">
              <div class="router_box">
                <i class="el-icon-s-ticket"></i>
                <span slot="title">
                  淘礼金
                </span>
              </div>
            </el-menu-item>

            <!-- //审核后台 5 -->
            <el-menu-item v-if="user_type === 5" index="/userinfo/atduhome">
              <div class="router_box">
                <i class="el-icon-s-home"></i>
                <span slot="title">
                  审核首页
                </span>
              </div>
            </el-menu-item>
            <!-- 商品审核 -->
            <el-menu-item v-if="user_type === 5" index="/userinfo/auditpage">
              <div class="router_box">
                <i class="el-icon-shopping-bag-1"></i>
                <span slot="title">
                  商品审核
                </span>
              </div>
            </el-menu-item>
            <!-- 用户审核 -->
            <el-menu-item v-if="user_type === 5" index="/userinfo/audituser">
              <div class="router_box">
                <i class="el-icon-mobile-phone"></i>
                <span slot="title">
                  用户审核
                </span>
              </div>
            </el-menu-item>

            <!-- 后台管理 4-->
            <!-- <el-menu-item v-if="user_type === 4" index="/userinfo/adminhome">
              <div class="router_box">
                <i class="el-icon-s-home"></i>
                <span slot="title">
                  管理首页
                </span>
              </div>
            </el-menu-item> -->
            <!-- 控制台 -->
            <el-menu-item v-if="user_type === 4" index="/userinfo/dashboard">
              <div class="router_box">
                <i class="el-icon-s-data"></i>
                <span slot="title">
                  控制台
                </span>
              </div>
            </el-menu-item>
            <!-- 管理后台 -->
            <el-menu-item v-if="user_type === 4" index="/userinfo/managepage">
              <div class="router_box">
                <i class="el-icon-s-tools"></i>
                <span slot="title">
                  管理后台
                </span>
              </div>
            </el-menu-item>
            <!-- 上单账号管理 -->
            <el-menu-item
              v-if="user_type === 4"
              index="/userinfo/accountmanage"
            >
              <div class="router_box">
                <i class="el-icon-female"></i>
                <span slot="title">
                  上单账号管理
                </span>
              </div>
            </el-menu-item>
            <!-- 上单数据统计 -->
            <el-menu-item
              v-if="user_type === 4"
              index="/userinfo/datastatistics"
            >
              <div class="router_box">
                <i class="el-icon-menu"></i>
                <span slot="title">
                  上单数据统计
                </span>
              </div>
            </el-menu-item>
            <!-- 营销活动 -->
            <el-menu-item v-if="user_type === 4" index="/userinfo/yxactive">
              <div class="router_box">
                <i class="el-icon-connection"></i>
                <span slot="title">
                  营销活动
                </span>
              </div>
            </el-menu-item>
            <!-- 文章管理 -->
            <el-menu-item
              v-if="user_type === 4"
              index="/userinfo/articlemanage"
            >
              <div class="router_box">
                <i class="el-icon-news"></i>
                <span slot="title">
                  文章管理
                </span>
              </div>
            </el-menu-item>
            <!-- 公告管理 -->
            <el-menu-item v-if="user_type === 4" index="/userinfo/noticemansge">
              <div class="router_box">
                <i class="el-icon-news"></i>
                <span slot="title">
                  公告管理
                </span>
              </div>
            </el-menu-item>
            <!-- 拒绝理由 -->
            <el-menu-item v-if="user_type === 4" index="/userinfo/rejectreason">
              <div class="router_box">
                <i class="el-icon-chat-line-square"></i>
                <span slot="title">
                  拒绝理由
                </span>
              </div>
            </el-menu-item>
          </el-menu>
        </div>
        <div style="margin-left:20px;width: 89%;" class="routerview_box">
          <el-backtop></el-backtop>
          <router-view />
        </div>
      </div>
    </div>
    <botloading></botloading>
  </div>
</template>

<script>
import logo from "@/components/logo.vue";
import { loginOut } from "@/api/user/user";
import botloading from "@/components/botloading.vue";

export default {
  name: "userinfo",
  components: {
    botloading,
    logo
  },
  data() {
    return {
      name: "",
      path: "",
      user_type: 0
    };
  },

  computed: {},
  created() {
    this.user_type = this.$ls.get("usertype");
    console.log("tpye", this.user_type);
    this.name = this.$ls.get("userinfo").nickname;
    console.log("name", this.name);
  },
  mounted() {
    this.$router.afterEach(() => {
      // to, from, next
      window.scrollTo(0, 0);
    });
  },
  methods: {
    goindex() {
      this.$router.push("/optimGoods/siftGoods");
    },
    dologout() {
      var usertype = "";
      if (this.$ls.get("usertype")) {
        usertype = this.$ls.get("usertype");
        console.log(usertype);
      }
      loginOut()
        // loginOut({
        //   token: getToken()
        // })
        .then(res => {
          console.log(res);
          // removeToken();
          this.$ls.clear();
          this.$message({
            showClose: false,
            message: "注销成功"
          });
          if (usertype == 3) {
            this.$router.push("/login/auditlogin");
          } else {
            this.$router.push("/login/login");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
    // dologout() {
    //   if (this.$ls.get("token")) {
    //     loginOut({
    //       token: this.$ls.get("token")
    //     })
    //       .then(res => {
    //         console.log(res);
    //         // removeToken();
    //         this.$ls.clear();
    //         this.name = "";
    //         this.$message({
    //           showClose: true,
    //           message: "退出成功"
    //         });
    //         this.$router.push("/login");
    //       })
    //       .catch(err => {
    //         console.log(err);
    //       });
    //   } else {
    //     this.$router.push("/login/login");
    //   }
    // }
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    //   // this.path = keyPath[0];
    //   // console.log(this.path instanceof String);
    //   // this.$router.push({
    //   //   path: this.path
    //   //   // query: {
    //   //   //   id: id
    //   //   // }
    //   // });
    // }
  }
};
</script>

<style lang="less" scoped>
.userinfo {
  width: 100%;
  background-color: #f5f7fa;
  .top {
    width: 100%;
    background-color: #fff;
    .top_main {
      // width: 1200px;
      background-color: #fff;
      height: 70px;
      margin: 0 auto;
      color: black;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top_left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .goindex {
        color: black;
        cursor: pointer;
        font-size: 14px;
        margin-left: 10px;
      }
      .goindex:hover {
        color: blue;
      }
    }
  }
  .userinfo_main {
    width: 99%;
    margin: 0 auto;
    padding-bottom: 20px;
    .user_content {
      width: 98%;
      margin: 0 auto;
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .navber::v-deep {
        width: 10%;
        border-radius: 8px;
        overflow: hidden;
        .el-submenu__title {
          width: 100%;
        }
        .el-menu-item-group {
          .el-menu-item-group__title {
            padding: 0 !important;
          }
          .el-menu-item {
            background-color: #f8f6f6;
          }
          .el-menu-item:hover {
            outline: 0;
            background-color: #ecf5ff;
          }
        }
        .is-active {
          background-color: #f0f6ff !important;
        }
        .router_box {
          margin-left: 20px;
        }
        .router_box2 {
          margin-left: 15px;
        }
      }
    }
  }
  .routerview_box::v-deep {
    .el-card {
      border: none !important;
      box-shadow: none !important;
    }
  }
}
</style>
